<template>
  <div>
    <el-card>
      <el-tabs v-model='activeName' type='card' @tab-click='handleClick'>
        <el-tab-pane label='分时用电' name='first' />
        <el-tab-pane label='日用电' name='second' />
        <el-tab-pane label='月用电' name='third' />
        <el-tab-pane label='年用电' name='four' />
      </el-tabs>
      <el-form ref='form' :model='form' label-width='80px' size='mini'>
        <div v-if="activeName==='first'" class='formtop'>
          <el-form-item
            label='起始'
            prop='start_time'
            label-width='auto'
            :rules="activeName==='first'?[
              { required: true, message: '起始日期不能为空'}
            ]:[
              { required: false}
            ]"
          >
            <el-date-picker
              v-model='form.start_time'
              type='datetime'
              placeholder='选择日期'
              value-format='yyyy-MM-dd'
              style='width: 100%;'
            />
          </el-form-item>
          <el-form-item
            label='截止'
            prop='end_time'
            label-width='auto'
            :rules="activeName==='first'?[
              { required: true, message: '截止日期不能为空'}
            ]:[
              { required: false}
            ]"
          >
            <el-date-picker
              v-model='form.end_time'
              type='datetime'
              placeholder='选择日期'
              value-format='yyyy-MM-dd'
              style='width: 100%;'
            />
          </el-form-item>
          <el-form-item>
            <el-button type='primary' @click='search()'>查询</el-button>
          </el-form-item>
        </div>
        <div v-if="activeName!=='first'" class='formtop'>
          <el-form-item
            label-width='auto'
            label='选择日期'
            prop='day_time'
            :rules="activeName!=='first'?[
              { required: true, message: '日期不能为空'}
            ]:[
              { required: false}
            ]"
          >
            <el-date-picker
              v-model='form.day_time'
              type='date'
              placeholder='选择日期时间'
              value-format='yyyy-MM-dd'
            />
          </el-form-item>

          <el-form-item>
            <el-button type='primary' @click='search()'>查询</el-button>
          </el-form-item>
        </div>
      </el-form>
      <el-divider />
      <div>
        <div v-if="activeName==='first'">

          <div id='energyRanking' />

          <el-table
            :data='tableData'
            border
            style='width: 100%'
          >
            <el-table-column
              prop='name'
              label='用电电量说明'
            />

            <el-table-column
              prop='begin'
              label='开始时间'
            />
            <el-table-column
              prop='end'
              label='结束时间'
            />
            <el-table-column
              prop='fee_'
              label='电费单价'
            />
            <el-table-column
              prop='sum'
              label='用电电量'
            />
            <el-table-column
              prop='fee'
              label='电费'
            />
            <el-table-column
              prop='proportion'
              label='用电占比'
            />
          </el-table>
        </div>
        <div v-if="activeName!=='first'">

          <div
            v-for='(item,index) in echartArr'
            :id="'energyRanking'+index"
            :key='item'
            class='energyRanking_Box'
          />

        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import commMix from './commonMix.js'
import * as echarts from 'echarts'
import { getElectricAnalysisData } from '@/api/efficiencyAnalysisApi.js'

export default {
  name: 'electricityComparisonChild',
  components: {},
  mixins: [commMix],
  props: {
    choseData: {
      type: Object,
      default: () => {
      },
    },
  },
  data() {
    return {
      options: [],
      form: {
        station_id: null,
        monitor_id: null,
        start_time: '',
        end_time: '',
        day_time: '',
        period_type: '', // 分时用电：time_fee ； 日用电：day2 ; 月用电：month 年用电：year
      },
      activeObj: {
        first: 'time_fee',
        second: 'day2',
        third: 'month',
        four: 'year',
      },
      value2: [],
      dropDownValue: '',
      optionsMetaAll: [],
      optionsMetaShow: [],
      valueMeta: [],
      input3: '',
      activeName: 'first',
      tableData: [],
      echartArr: [],
    }
  },
  watch: {
    choseData: { // 监听的对象
      deep: true, // 深度监听设置为 true
      handler: function(newV, oldV) {
        console.log(newV)
        this.nowTree = newV
        this.form.monitor_id = newV.id
        this.form.station_id = newV.site_id
        this.form.start_time = this.getDay(0)
        this.form.end_time = this.getDay(0)
        this.search()
      },
    },
    activeName: { // 监听的对象
      deep: true, // 深度监听设置为 true
      handler: function(newV, oldV) {
        this.form.day_time = this.getDay(0)
        this.form.start_time = this.getDay(0)
        this.form.end_time = this.getDay(0)
        this.search()
      },
    },
  },
  mounted() {

  },
  methods: {
    search() {
      this.$refs['form'].validate((valid) => {
        console.log(valid)
        if (valid) {
          this.form.period_type = this.activeObj[this.activeName]
          getElectricAnalysisData(this.form).then((res) => {
            console.log(res.data)
            if (this.activeName === 'first') {
              res.data.text = '电量分析'
              this.setEnergyRanking(res.data)
              this.tableData = res.data.tableData
            } else {
              this.echartArr = res.data.data
              this.$nextTick(() => {
                for (var i = 0; i < res.data.data.length; i++) {
                  this.setEnergyRanking(res.data.data[i], i)
                }
              })
            }
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    dropDownSearch() {
      var _this = this
      _this.valueMeta = []
      _this.optionsMetaShow = _this.optionsMetaAll.filter(_this.filterSearch)
    },
    filterSearch(item) {
      return item.includes(this.dropDownValue)
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    setEnergyRanking(v, n) {
      var myChart
      if (arguments.length > 1) {
        echarts.dispose(document.getElementById('energyRanking' + n))
        myChart = echarts.init(document.getElementById('energyRanking' + n))
      } else {
        echarts.dispose(document.getElementById('energyRanking'))
        myChart = echarts.init(document.getElementById('energyRanking'))
      }
      // 绘制图表
      var option = {
        title: {
          text: v.text,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
          },
        },
        legend: {
          data: v.legend,
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: [0, 0.01],
          data: v.xData,
        },
        yAxis: {
          type: 'value',

        },
        series: v.series,
      }
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
  },
}
</script>

<style lang='scss' scoped>
::v-deep .tableHead {
  background-color: #EDF1F8 !important;
}

.formtop {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

#energyRanking {
  width: 100%;
  height: 40vh;
}

.energyRanking_Box {
  width: 100%;
  height: 40vh;
}

.bottom_box {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  & > div {
    width: 45%;
    height: 34vh;
  }
}

::v-deep .is-required {
  display: flex;
  align-items: center;
  margin-left: 20px;
}
</style>
